<template>
    <el-card class="ep-card" v-if="tianzheng && !hidden" style="margin-bottom:10px">
        <div class="search-content">
            <div class="search-input">
                <epl-search-insured :datas="datas" :codetype="psCodeType" :tableList="psTableData" :api="psUrl" :show="true" :property="person" :type="personType" title="身份证号码" placeholder="请输入身份证号码查询"></epl-search-insured>
                <epl-search-insured :datas="datas" :codetype="cpCodeType" :tableList="cpTableData" :api="cpUrl" :show="true" :property="company" :type="companyType" title="统一社会信用代码" placeholder="请输入统一社会信用代码"></epl-search-insured>
            </div>
            <slot></slot>
        </div>
    </el-card>
</template>

<script type="es6">

    export default {
        props: {
            title: {
                type: String,
                default: '请填写title属性'
            },
            hidden: {
                type: Boolean,
                default:false
            },
            person: {},
            company: {},
            psTagType: {
                type: String,
                default:'person'
            },
            cpTagType: {
                type: String,
                default:'company'
            },
            showPerson: {
                type: Boolean,
                default:false
            },
            showCompany: {
                type: Boolean,
                default:false
            },
            personType: {
                type: String,
                default: ''
            },
            companyType: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            codetype:{
                type: String,
                default:''
            }
        },
        data() {
            return {
                dialogVisible:false,
                tableData:[],
                id:'',
                form:{
                    idCard:'',
                    name:'',
                    paymentStatus:''
                },
                psTableData:[],
                cpTableData:[],
                psUrl:'',
                cpUrl:'',
                psCodeType:'',
                cpCodeType:''
            }
        },
        computed: {
            tianzheng() {
                return !this.$route.query.ticket && !this.$route.query.projid
            }
        },
        watch:{
            psTagType: {
                handler(value) {
                    this.getTableList(value,this.personType);
                },
                deep: true
            },
            cpTagType: {
                handler(value) {
                    this.getTableList(value,this.companyType);
                },
                deep: true
            },
            codetype:{
                handler(value) {
                    this.getCodeType(value);
                },
                deep: true
            }
        },
        created() {
            this.getCodeType(this.codetype);
            this.getTableList(this.psTagType,this.personType);
            this.getTableList(this.cpTagType,this.companyType);
        },
        methods: {
            /**
             * 获取codetype
             */
            getCodeType(value){
                if(value){
                    let codetype = value.split(',');
                    this.psCodeType = codetype[0];
                    this.cpCodeType = codetype[1];
                }
            },
            /**
             * 根据tagType区分逻辑
             */
            getTableList(tag,type){
                let table = [];
                let url = '';
                switch (tag) {
                    case 'person':
                        table = [
                            {name:'姓名',value:'aac003'},
                            {name:'证件号码',value:'aac147'},
                            {name:'证件类型',value:'aac058'},
                            {name:'国家(地区)',value:'aac161'},
                            {name:'性别',value:'aac004'},
                            {name:'出生日期',value:'aac006'},
                            {name:'民族',value:'aac005'},
                            {name:'户口所在地',value:'aac010'},
                            {name:'户口性质',value:'aac009'}
                        ];
                        url = '/business/d100insiup/d02personcommon/PsQueryComm/doPsQueryComm03';
                        break;
                    case 'company':
                        table = [
                            {name:'统一社会信用代码',value:'bab010'},
                            {name:'行政区划',value:'aab301'},
                            {name:'单位类型',value:'aab019'},
                            {name:'隶属关系',value:'aab021'},
                            {name:'所属行业',value:'aab022'},
                            {name:'行业风险类别',value:'aaa149'},
                            {name:'联系人',value:'aae004'},
                            {name:'联系电话',value:'aae005'}
                        ];
                        url = '/business/d100insiup/d01companycommon/CpQueryComm/doCpQueryComm02';
                        break;
                }
                // console.log('table',table);
                if(type.indexOf('PERSON') != '-1'){
                    this.psTableData = table;
                    this.psUrl = url;
                }else if(type.indexOf('COMPANY') != '-1'){
                    this.cpTableData = table;
                    this.cpUrl = url;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .search-content{
        display: flex;
        justify-content:space-between;
        .search-input {
            display: flex;
            flex: 1;
            margin-right: 30px;
            span {
                flex: 100px;
                margin-right: 10px;
                line-height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            span:before {
                content: '*';
                color: #f56c6c;
                margin-right: 4px;
            }

            .el-icon-search {
                cursor: pointer;
            }

            .el-icon-search:hover {
                color: #409eff;
            }
        }
    }
</style>
